<template>
	<view class="container">
		<custom-navbar title="帖子详情" :showBack="true"></custom-navbar>
		
		<view class="main-content" :style="{paddingTop: navbarTotalHeight + 'px'}">
			<!-- 帖子详情 -->
			<view class="post-detail" v-if="postDetail">
				<!-- 用户信息 -->
				<view class="post-header">
					<image class="user-avatar" :src="postDetail.userAvatar" mode="aspectFit"></image>
					<view class="user-info">
						<text class="username">{{postDetail.username}}</text>
						<text class="post-time">{{postDetail.createTime}}</text>
					</view>
				</view>
				
				<!-- 帖子内容 -->
				<view class="post-content">
					<text class="post-title">{{postDetail.title}}</text>
					<text class="post-desc" v-if="postDetail.content">{{postDetail.content}}</text>
					
					<!-- 图片 -->
					<view class="post-images" v-if="postDetail.images && postDetail.images.length > 0">
						<image 
							class="post-image" 
							v-for="(img, index) in postDetail.images" 
							:key="index"
							:src="img" 
							mode="aspectFill"
							@tap="previewImage(postDetail.images, index)"
						></image>
					</view>
				</view>
				
				<!-- 互动区域 -->
				<view class="post-actions">
					<view class="action-item" @tap="toggleLike">
						<image 
							class="action-icon" 
							:src="postDetail.isLiked ? 'https://img.icons8.com/fluency/48/hearts.png' : 'https://img.icons8.com/ios/50/hearts.png'" 
							mode="aspectFit"
						></image>
						<text class="action-text" :class="{liked: postDetail.isLiked}">{{postDetail.likeCount}}</text>
					</view>
					
					<view class="action-item">
						<image class="action-icon" src="https://img.icons8.com/ios/50/speech-bubble.png" mode="aspectFit"></image>
						<text class="action-text">{{comments.length}}</text>
					</view>
					
					<view class="action-item" @tap="sharePost">
						<image class="action-icon" src="https://img.icons8.com/ios/50/share.png" mode="aspectFit"></image>
						<text class="action-text">分享</text>
					</view>
				</view>
			</view>
			
			<!-- 评论区域 -->
			<view class="comments-section">
				<view class="section-header">
					<text class="section-title">评论 ({{comments.length}})</text>
				</view>
				
				<!-- 评论列表 -->
				<view class="comments-list" v-if="comments.length > 0">
					<view 
						class="comment-item" 
						v-for="(comment, index) in comments" 
						:key="index"
					>
						<image class="comment-avatar" :src="comment.userAvatar" mode="aspectFit"></image>
						<view class="comment-content">
							<view class="comment-header">
								<text class="comment-username">{{comment.username}}</text>
								<text class="comment-time">{{comment.createTime}}</text>
							</view>
							<text class="comment-text">{{comment.content}}</text>
							
							<!-- 回复 -->
							<view class="comment-replies" v-if="comment.replies && comment.replies.length > 0">
								<view 
									class="reply-item" 
									v-for="(reply, replyIndex) in comment.replies" 
									:key="replyIndex"
								>
									<text class="reply-text">
										<text class="reply-user">{{reply.username}}</text>
										回复
										<text class="reply-target">{{reply.targetUser}}</text>
										: {{reply.content}}
									</text>
								</view>
							</view>
							
							<view class="comment-actions">
								<view class="comment-action" @tap="toggleCommentLike(comment, index)">
									<image 
										class="comment-action-icon" 
										:src="comment.isLiked ? 'https://img.icons8.com/fluency/24/hearts.png' : 'https://img.icons8.com/ios/24/hearts.png'" 
										mode="aspectFit"
									></image>
									<text class="comment-action-text" :class="{liked: comment.isLiked}">{{comment.likeCount}}</text>
								</view>
								<view class="comment-action" @tap="replyComment(comment)">
									<text class="comment-action-text">回复</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 空状态 -->
				<view class="empty-comments" v-else>
					<image class="empty-icon" src="https://img.icons8.com/fluency/96/no-comments.png" mode="aspectFit"></image>
					<text class="empty-text">暂无评论</text>
					<text class="empty-desc">快来发表第一条评论吧！</text>
				</view>
			</view>
		</view>
		
		<!-- 底部评论输入框 -->
		<view class="comment-input-container" :style="{paddingBottom: safeAreaBottom + 'px'}">
			<view class="comment-input-wrapper">
				<input 
					class="comment-input" 
					placeholder="写下你的评论..." 
					v-model="newComment"
					@confirm="submitComment"
					confirm-type="send"
				/>
				<view class="send-btn" @tap="submitComment" :class="{active: newComment.trim().length > 0}">
					<text class="send-text">发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue';

export default {
	components: {
		CustomNavbar
	},
	data() {
		return {
			navbarTotalHeight: 132,
			statusBarHeight: 44,
			safeAreaBottom: 0,
			postId: null,
			newComment: '',
			postDetail: {
				id: 1,
				username: '影视迷',
				userAvatar: 'https://img.icons8.com/fluency/48/user.png',
				createTime: '2小时前',
				title: '最近看了一部超好看的电影！',
				content: '强烈推荐《肥龙过江》，剧情紧凑，演员演技在线，真的是一部不可多得的好作品！刚开始还以为是普通的喜剧片，没想到剧情这么精彩，有搞笑的地方，也有让人感动的情节。特别是主角的演技，真的是太棒了！',
				images: ['https://img.icons8.com/fluency/96/movie.png'],
				likeCount: 24,
				commentCount: 8,
				isLiked: false
			},
			comments: [
				{
					id: 1,
					username: '电影爱好者',
					userAvatar: 'https://img.icons8.com/fluency/48/person.png',
					createTime: '1小时前',
					content: '我也看了这部电影，确实很不错！特别是那个追车的片段，太刺激了！',
					likeCount: 3,
					isLiked: false,
					replies: [
						{
							username: '影视迷',
							targetUser: '电影爱好者',
							content: '对对对！那段真的超级精彩！'
						}
					]
				},
				{
					id: 2,
					username: '懒人小白',
					userAvatar: 'https://img.icons8.com/fluency/48/user-male.png',
					createTime: '30分钟前',
					content: '哪里可以看到这部电影呢？求资源！',
					likeCount: 5,
					isLiked: true,
					replies: []
				},
				{
					id: 3,
					username: '电影发烧友',
					userAvatar: 'https://img.icons8.com/fluency/48/user-female.png',
					createTime: '15分钟前',
					content: '这部电影的配乐也很棒，完美契合剧情的发展！',
					likeCount: 1,
					isLiked: false,
					replies: []
				}
			]
		}
	},
	onLoad(options) {
		if (options.postId) {
			this.postId = options.postId;
			// 这里可以根据postId加载具体的帖子数据
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 44;
		this.navbarTotalHeight = this.statusBarHeight + 44;
		this.safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
	},
	methods: {
		// 预览图片
		previewImage(images, current) {
			uni.previewImage({
				current: current,
				urls: images
			});
		},
		
		// 点赞帖子
		toggleLike() {
			if (this.postDetail.isLiked) {
				this.postDetail.likeCount--;
				this.postDetail.isLiked = false;
			} else {
				this.postDetail.likeCount++;
				this.postDetail.isLiked = true;
			}
		},
		
		// 分享帖子
		sharePost() {
			uni.showActionSheet({
				itemList: ['微信分享', '朋友圈分享', '复制链接'],
				success: (res) => {
					const actions = ['微信分享', '朋友圈分享', '复制链接'];
					uni.showToast({
						title: actions[res.tapIndex],
						icon: 'none'
					});
				}
			});
		},
		
		// 点赞评论
		toggleCommentLike(comment, index) {
			if (comment.isLiked) {
				comment.likeCount--;
				comment.isLiked = false;
			} else {
				comment.likeCount++;
				comment.isLiked = true;
			}
			
			this.$set(this.comments, index, comment);
		},
		
		// 回复评论
		replyComment(comment) {
			this.newComment = `回复 ${comment.username}: `;
		},
		
		// 提交评论
		submitComment() {
			if (!this.newComment.trim()) {
				uni.showToast({
					title: '请输入评论内容',
					icon: 'none'
				});
				return;
			}
			
			// 模拟提交评论
			const newCommentItem = {
				id: Date.now(),
				username: '我',
				userAvatar: 'https://img.icons8.com/fluency/48/user.png',
				createTime: '刚刚',
				content: this.newComment.trim(),
				likeCount: 0,
				isLiked: false,
				replies: []
			};
			
			this.comments.push(newCommentItem);
			this.newComment = '';
			
			uni.showToast({
				title: '评论成功',
				icon: 'success'
			});
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.main-content {
	padding: 20rpx;
}

/* 帖子详情 */
.post-detail {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

/* 帖子头部 */
.post-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.user-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.user-info {
	flex: 1;
}

.username {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 5rpx;
}

.post-time {
	display: block;
	font-size: 22rpx;
	color: #999;
}

/* 帖子内容 */
.post-content {
	margin-bottom: 20rpx;
}

.post-title {
	display: block;
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
	line-height: 1.4;
}

.post-desc {
	display: block;
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 20rpx;
}

/* 帖子图片 */
.post-images {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
	margin-bottom: 20rpx;
}

.post-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
	background: #f8f9fa;
}

/* 互动区域 */
.post-actions {
	display: flex;
	align-items: center;
	gap: 40rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f5f5f5;
}

.action-item {
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}

.action-item:active {
	transform: scale(0.95);
}

.action-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
	opacity: 0.7;
}

.action-text {
	font-size: 24rpx;
	color: #666;
	transition: all 0.3s ease;
}

.action-text.liked {
	color: #ff6b35;
	font-weight: bold;
}

/* 评论区域 */
.comments-section {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.section-header {
	margin-bottom: 25rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

/* 评论列表 */
.comments-list {
	display: flex;
	flex-direction: column;
	gap: 25rpx;
}

.comment-item {
	display: flex;
	align-items: flex-start;
}

.comment-avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-right: 15rpx;
	margin-top: 5rpx;
}

.comment-content {
	flex: 1;
}

.comment-header {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
	gap: 15rpx;
}

.comment-username {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
}

.comment-time {
	font-size: 20rpx;
	color: #999;
}

.comment-text {
	display: block;
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 15rpx;
}

/* 回复 */
.comment-replies {
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 15rpx;
	margin-bottom: 15rpx;
}

.reply-item {
	margin-bottom: 10rpx;
}

.reply-item:last-child {
	margin-bottom: 0;
}

.reply-text {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
}

.reply-user {
	color: #667eea;
	font-weight: bold;
}

.reply-target {
	color: #667eea;
	font-weight: bold;
}

/* 评论操作 */
.comment-actions {
	display: flex;
	align-items: center;
	gap: 25rpx;
}

.comment-action {
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}

.comment-action:active {
	transform: scale(0.95);
}

.comment-action-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 5rpx;
}

.comment-action-text {
	font-size: 22rpx;
	color: #999;
	transition: all 0.3s ease;
}

.comment-action-text.liked {
	color: #ff6b35;
	font-weight: bold;
}

/* 空状态 */
.empty-comments {
	text-align: center;
	padding: 60rpx 40rpx;
}

.empty-icon {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 20rpx;
	opacity: 0.6;
}

.empty-text {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.empty-desc {
	display: block;
	font-size: 24rpx;
	color: #999;
}

/* 底部评论输入框 */
.comment-input-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	border-top: 1rpx solid #e5e5e5;
	padding: 20rpx;
	z-index: 1000;
}

.comment-input-wrapper {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.comment-input {
	flex: 1;
	background: #f8f9fa;
	border-radius: 25rpx;
	padding: 15rpx 25rpx;
	font-size: 26rpx;
	color: #333;
}

.send-btn {
	background: #e0e0e0;
	border-radius: 25rpx;
	padding: 15rpx 25rpx;
	transition: all 0.3s ease;
}

.send-btn.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.send-text {
	font-size: 26rpx;
	color: #999;
	transition: all 0.3s ease;
}

.send-btn.active .send-text {
	color: #ffffff;
	font-weight: bold;
}
</style>